<template>
  <view class="order-confirm-page">
    <!-- 收货地址 -->
    <view class="address-section" @click="selectAddress">
      <view class="address-content" v-if="selectedAddress">
        <view class="user-info">
          <text class="name">{{selectedAddress.name}}</text>
          <text class="phone">{{selectedAddress.phone}}</text>
        </view>
        <view class="address-detail">
          {{selectedAddress.province}}{{selectedAddress.city}}{{selectedAddress.district}}{{selectedAddress.detail}}
        </view>
      </view>
      <view class="no-address" v-else>
        <text>请选择收货地址</text>
      </view>
      <view class="arrow-right">
        <uni-icons type="arrowright" size="20"></uni-icons>
      </view>
    </view>
    
    <!-- 商品信息 -->
    <view class="goods-section">
      <view class="section-title">商品信息</view>
      <view class="goods-item" v-for="(item, index) in goodsList" :key="index">
        <image class="goods-img" :src="item.image" mode="aspectFill"></image>
        <view class="goods-info">
          <view class="goods-title">{{item.title}}</view>
          <view class="goods-spec">{{item.spec}}</view>
          <view class="goods-price">
            <text class="current-price">¥{{item.price}}</text>
            <text class="original-price" v-if="item.originalPrice">¥{{item.originalPrice}}</text>
          </view>
          <view class="goods-count">x{{item.count}}</view>
        </view>
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="order-info-section">
      <view class="section-title">订单信息</view>
      <view class="info-item">
        <text class="label">商品总价</text>
        <text class="value">¥{{totalPrice}}</text>
      </view>
      <view class="info-item">
        <text class="label">运费</text>
        <text class="value">¥{{shippingFee}}</text>
      </view>
      <view class="info-item">
        <text class="label">优惠券</text>
        <text class="value" @click="selectCoupon">-¥{{couponAmount}}</text>
      </view>
      <view class="info-item total">
        <text class="label">实付款</text>
        <text class="value">¥{{actualPayment}}</text>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="footer">
      <view class="price-info">
        <text>合计:</text>
        <text class="price">¥{{actualPayment}}</text>
      </view>
      <view class="submit-btn" @click="submitOrder">确认下单</view>
    </view>
  </view>
</template>
<script>

export default {

  data() {
    return {
      selectedAddress: {
        id: 1,
        name: "张三",
        phone: "13800138000",
        province: "广东省",
        city: "深圳市",
        district: "南山区",
        detail: "科技园路123号"
      },
      goodsList: [
        {
          id: 1,
          image: "/static/goods/1.jpg",
          title: "九成新iPhone 12 Pro",
          spec: "256G 蓝色",
          price: 4999,
          originalPrice: 9299,
          count: 1
        },
        {
          id: 2,
          image: "/static/goods/2.jpg",
          title: "二手佳能单反相机",
          spec: "EOS 80D 18-135mm套机",
          price: 4200,
          count: 1
        }
      ],
      shippingFee: 15,
      couponAmount: 30,
      availableCoupons: [
        { id: 1, name: "新用户优惠券", amount: 30, condition: "满100元可用" },
        { id: 2, name: "618大促券", amount: 50, condition: "满300元可用" }
      ]
    }
  },
  computed: {
    totalPrice() {
      return this.goodsList.reduce((sum, item) => sum + item.price * item.count, 0)
    },
    actualPayment() {
      return this.totalPrice + this.shippingFee - this.couponAmount
    }
  },
  methods: {
    // 选择地址
    selectAddress() {
      uni.navigateTo({
        url: '/pagesA/address?selectMode=true'
      })
    },
    // 选择优惠券
    selectCoupon() {
      uni.showActionSheet({
        itemList: this.availableCoupons.map(c => `${c.name} (${c.condition})`),
        success: (res) => {
          this.couponAmount = this.availableCoupons[res.tapIndex].amount
        }
      })
    },
    // 提交订单
    submitOrder() {
      if (!this.selectedAddress) {
        uni.showToast({
          title: '请选择收货地址',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({
        title: '提交中...'
      })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '订单提交成功'
        })
        
        // 跳转到订单详情页
        setTimeout(() => {
          uni.redirectTo({
            url: `/pages/order/detail?id=${new Date().getTime()}`
          })
        }, 1500)
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.order-confirm-page {
  padding-bottom: 100rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.header {
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  background-color: #fff;
  position: relative;
  border-bottom: 1rpx solid #eee;
}

.address-section {
  display: flex;
  align-items: center;
  padding: 30rpx;
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  position: relative;
  
  .address-content {
    flex: 1;
    
    .user-info {
      font-size: 32rpx;
      margin-bottom: 10rpx;
      
      .phone {
        margin-left: 20rpx;
        color: #666;
      }
    }
    
    .address-detail {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
    }
  }
  
  .no-address {
    flex: 1;
    color: #999;
    font-size: 32rpx;
    text-align: center;
    padding: 30rpx 0;
  }
  
  .arrow-right {
    width: 40rpx;
    text-align: right;
    color: #999;
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.goods-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 10rpx;
  
  .goods-item {
    display: flex;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    .goods-img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }
    
    .goods-info {
      flex: 1;
      position: relative;
      
      .goods-title {
        font-size: 30rpx;
        line-height: 1.4;
        margin-bottom: 10rpx;
      }
      
      .goods-spec {
        font-size: 26rpx;
        color: #999;
        margin-bottom: 20rpx;
      }
      
      .goods-price {
        .current-price {
          font-size: 32rpx;
          color: #ff2e4d;
          font-weight: bold;
        }
        
        .original-price {
          font-size: 24rpx;
          color: #999;
          text-decoration: line-through;
          margin-left: 15rpx;
        }
      }
      
      .goods-count {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}

.order-info-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 10rpx;
  
  .info-item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    font-size: 28rpx;
    
    .label {
      color: #666;
    }
    
    .value {
      color: #333;
    }
    
    &.total {
      border-top: 1rpx solid #eee;
      
      .value {
        color: #ff2e4d;
        font-weight: bold;
        font-size: 32rpx;
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1rpx solid #eee;
  
  .price-info {
    margin-right: 20rpx;
    font-size: 28rpx;
    
    .price {
      color: #ff2e4d;
      font-weight: bold;
      font-size: 32rpx;
      margin-left: 10rpx;
    }
  }
  
  .submit-btn {
    width: 240rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    background-color: #ff2e4d;
    color: #fff;
    font-size: 32rpx;
    border-radius: 20rpx;
    margin-right: 20rpx;
  }
}
</style>